<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="2">
          <!-- <el-button type="primary" @click="addDialogVisible = true"
            >添加学生</el-button
          > -->
          <el-button type="primary" @click="$router.push('/voice/luyin')"
            >添加学生</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addDialogVisible1 = true"
            >批量添加</el-button
          >
        </el-col> </el-row
      ><!-- 用户列表区域 -->
      <el-table
        ref="multipleTable"
        style="margin-top: 20px"
        :data="studentlist"
        border
        stripe
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-descriptions
              class="margin-top"
              title="详细信息"
              :column="3"
              border
              style="margin: 20px"
            >
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  阶段
                </template>
                {{ props.row.collegestage }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  第几次模块化
                </template>
                {{ props.row.model_number }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  年龄
                </template>
                {{ props.row.age }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  身份证号
                </template>
                {{ props.row.idcard }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  家长电话
                </template>
                {{ props.row.iphone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  宿舍号
                </template>
                {{ props.row.dorm_number }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  家庭住址
                </template>
                {{ props.row.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  市场部
                </template>
                {{ props.row.market }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  上传日期
                </template>
                {{ props.row.recording_time }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>

        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="学院" prop="depar"></el-table-column>
        <el-table-column label="班级" prop="cls"></el-table-column>
        <el-table-column label="讲师" prop="lecturer"></el-table-column>
        <el-table-column label="导员" prop="counsellor"></el-table-column>
        <!-- <el-table-column label="年龄" prop="age">
          <template slot-scope="scope">
            <span v-if="scope.row.sex == 0">女</span>
            <span v-if="scope.row.sex == 1">男</span>
          </template>
        </el-table-column> -->

        <el-table-column label="是否与学生沟通" width="300">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.stu_recordaddress != null &&
                scope.row.stu_recordaddress != ''
              "
            >
              <div style="width: 300px; height: 50px">
                <video
                  controls
                  name="media"
                  style="width: 100%; height: 100%; object-fit: fill"
                >
                  <source
                    :src="url + scope.row.stu_recordaddress"
                    type="audio/wav"
                  />
                </video></div
            ></span>
            <span v-else-if="scope.row.stu_connect">
              <el-button type="primary" @click="qwe(scope.row, 'xuesheng')"
                >上传录音</el-button
              ></span
            >
            <span v-else>不允许上传录音</span>
          </template>
        </el-table-column>
        <el-table-column label="是否与家长沟通" width="300">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.par_recordaddress != null &&
                scope.row.par_recordaddress != ''
              "
            >
              <div style="width: 300px; height: 50px">
                <video
                  controls
                  name="media"
                  style="width: 100%; height: 100%; object-fit: fill"
                >
                  <source
                    :src="url + scope.row.par_recordaddress"
                    type="audio/wav"
                  />
                </video></div
            ></span>
            <span v-else-if="scope.row.par_connect"
              ><el-button type="primary" @click="qwe(scope.row, 'jiazhang')"
                >上传录音</el-button
              ></span
            >
            <span v-else>不允许上传录音</span>
          </template>
        </el-table-column>
        <el-table-column label="教学周期" prop="period"></el-table-column>
        <!-- <el-table-column label="身份证" prop="idcardnumber"></el-table-column> -->

        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <!-- <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="showEditDialog(scope.row)"
            ></el-button> -->
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="removeDepartById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 批量添加学生对话框 -->
    <el-dialog
      title="批量导入学生信息"
      :visible.sync="addDialogVisible1"
      width="50%"
      @close="addDialogClosed1"
    >
      <!-- 内容主体区域 -->
      <el-form ref="addFormRef1" label-width="120px">
        <el-form-item label="上传错误信息:">
          <span v-if="piliangerror">{{ piliangerror }}</span>

          <span v-else>空</span>
        </el-form-item>
        <el-form-item class="uploaditem" label="Excel文件" prop="excel">
          <el-upload
            class="upload-demo"
            name="voicefile"
            drag
            :headers="header"
            action="http://101.34.188.212:8001/api/Recodings/Stu_Recoding"
            :auto-upload="false"
            ref="voicefile"
            :on-success="uploadSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
          <el-link
            href="http://101.34.188.212:8001/api/download_excel_voice"
            target="_blank"
            type="primary"
            icon="el-icon-download"
            >下载excel模板</el-link
          >
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addUser1">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加学生用户的对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form :model="addForm" label-width="70px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学院名称" prop="depar">
          <el-input v-model="addForm.depar"></el-input>
        </el-form-item>
        <el-form-item label="讲师" prop="lecturer">
          <el-input v-model="addForm.lecturer"></el-input>
        </el-form-item>
        <el-form-item label="导员" prop="counsellor">
          <el-input v-model="addForm.counsellor"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="cls">
          <el-input v-model="addForm.cls"></el-input>
        </el-form-item>
        <el-form-item label="教研组" prop="collegestage">
          <el-input v-model="addForm.collegestage"></el-input>
        </el-form-item>
        <el-form-item label="第几次模块化" prop="model_number">
          <el-input v-model="addForm.model_number"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="addForm.age"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="iphone">
          <el-input v-model="addForm.iphone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号" prop="dorm_number">
          <el-input v-model="addForm.dorm_number"></el-input>
        </el-form-item>
        <el-form-item label="市场部" prop="market">
          <el-input v-model="addForm.market"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idcard">
          <el-input v-model="addForm.idcard"></el-input>
        </el-form-item>
        <el-form-item label="是否与家长沟通" prop="par_connect">
          <template>
            <el-radio v-model="addForm.par_connect" label="true">是</el-radio>
            <el-radio v-model="addForm.par_connect" label="false">否</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="是否与学生沟通" prop="stu_connect">
          <template>
            <el-radio v-model="addForm.stu_connect" label="true">是</el-radio>
            <el-radio v-model="addForm.stu_connect" label="false">否</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="教学周期" prop="period">
          <el-input v-model="addForm.period"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
     <!-- 上传录音文件 -->
    <el-dialog
      :title="editvoiceidtitle"
      :visible.sync="addDialogVisible2"
      width="50%"
      @close="addDialogClosed2"
    >
      <!-- 内容主体区域 -->
      <el-form ref="addFormRef2" label-width="80px">
        <el-form-item class="uploaditem" label="Excel文件" prop="excel">
          <el-upload
            class="upload-demo"
            name="editvoicefile"
            drag
            :data="editvoiceid"
            :headers="header"
            action="http://101.34.188.212:8001/api/Recodings/editvoice"
            :auto-upload="false"
            ref="voiceFile"
            :on-success="uploadSuccess2"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addUser2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getHeader } from "utils/login";

import { getStuMessages, addStuMessages, removevoice } from "network/api/voice";

export default {
  directives: {},
  data() {
    return {
      url: "http://101.34.188.212:8001/",
      // url: "http://127.0.0.1:8000/",
      header: { Authorization: "" },
      //添加学生对话框
      addDialogVisible: false,
      addDialogVisible1: false,
      addDialogVisible2: false,
      editvoiceid: { id: null, leixing: "" },
      editvoiceidtitle: "",
      piliangerror: "",
      studentlist: [], // 获取用户列表的参数对象
      queryInfo: {
        query: {},
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        pagesize: 5,
      },
      total: null,
      addForm: {
        name: "",
        depar: "", // 部门名称
        lecturer: "", // 讲师
        counsellor: "", // 导员
        cls: "", // 班级
        collegestage: "", //教研组
        model_number: "", //第几次模块化
        idcard: "", // 身份证
        age: "", //年龄
        iphone: "", // 手机号
        address: "", // 居住地址
        dorm_number: "", // 宿舍号
        market: "", // 市场部
        par_connect: "", //是否跟家长沟通
        stu_connect: "", //是否跟学生沟通
        period: "", //教学周期
        // focus: "",
      },
    };
  },
  async created() {
    this.header = getHeader();
    this.getStudentsmessage(); // 获取基本信息接口
  },
  computed: {},
  watch: {},
  methods: {
    //  获取学生基本信息
    async getStudentsmessage() {
      // console.log(this.queryInfo.page, this.queryInfo.pagesize);
      let res = await getStuMessages(
        this.queryInfo.page,
        this.queryInfo.pagesize
      );
      console.log(res);
      this.total = res.count;
      this.studentlist = res.data;
      // this.queryInfo.pagesize=res.current_page
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getStudentsmessage();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getStudentsmessage();
    },
    addDialogClosed() {
      // this.$refs.addFormRef.resetFields();
    }, // 根据Id删除对应的用户信息
    async removeDepartById(id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将永久删除该部门, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      removevoice(id).then((value) => {
        this.$message.success("删除语音成功！");
        this.getStuMessages();
      });
    },
    // 点击按钮，添加新学生用户
    async addUser() {
      console.log(this.addForm);
      const res = await addStuMessages(this.addForm);
      console.log(res);
      this.getStudentsmessage();
      this.$message.success("添加成功");
      this.addDialogVisible = false;
    },
    qwe(row, leixing) {
      this.editvoiceid.id = row.id;
      if (leixing == "jiazhang") {
        this.editvoiceidtitle = "上传家长录音文件";
      } else if (leixing == "xuesheng") {
        this.editvoiceidtitle = "上传学生录音文件";
      }

      this.editvoiceid.leixing = leixing;

      this.addDialogVisible2 = true;
    },
    async addDialogClosed2() {
      this.$refs.addFormRef2.resetFields();
    },
    addUser2() {
      // this.$refs.addFormRef1.validate(async (valid) => {
      // if (!valid) return;

      this.$refs.voiceFile.submit();

      // });
    },
    uploadSuccess2(response, file, fileList) {
      console.log(response, file, fileList);

      this.addDialogVisible2 = false;
      this.getStudentsmessage();
    },
    // 批量监听添加学生对话框的关闭事件
    async addDialogClosed1() {
      //   this.$refs.addFormRef1.resetFields();
      // this.getStudentsmessage();
    },
    addUser1() {
      //   this.$refs.addFormRef1.validate(async (valid) => {
      //     if (!valid) return;

      this.$refs.voicefile.submit();
      //   });
    },
    uploadSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      if (response.status == "Yes") {
        //隐藏批量添加用户的对话框
        this.addDialogVisible1 = false;
        // 重新获取用户列表数据
        // this.getStudents();
      } else {
        console.log(response, 123);
        this.piliangerror = response.error;
        this.$message.error("信息有误");
      }
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
.jiajian {
  width: 200px;
  margin: 0 auto;
  font-size: 30px;
}
</style>
